
.bg-white {
    background: #FFFFFF;
}

.bg-gray {
    background: #efefef;
}
.over-hide{
    overflow: hidden;
}
.color-white{
    color: #FFFFFF !important;
}
.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.flex-l-center {
    align-items: center;
}
.flex-l-end{
    align-items: flex-end;
}
.flex-l-start {
    align-items: flex-start;
}
.flex-l-stretch{
    align-items: stretch;
}
.flex-l-baseline{
    align-items: baseline;
}
.flex-center{
    justify-content: center;
}
.flex-around {
    justify-content: space-around;
}
.flex-between {
    justify-content: space-between;
}
.flex-start {
    justify-content: flex-start;
}
.flex-end {
    justify-content: end;
}
.m-auto{
    margin: auto;
}
.m-y-auto{
    margin: 0 auto;
}
.m-x-auto {
    margin: auto 0;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.font-color-333{
    color:#333333;
}
.font-color-666{
    color:#666666;
}
.font-color-999{
    color:#999999;
}
.font-color-000{
    color:#000000;
}
// 定义font-weight
@for $i from 0 through 900 {
    // 只要被100除尽的数
    @if $i % 2==0 or $i % 5==0 {
        .font-w-#{$i}{
            font-weight: $i;
        }
    }
}
// 定义flex等分
@for $i from 0 through 12 {
    .flex-#{$i} {
        flex: $i;
    }
}
@for $i from 0 through 750 {
    // 只要双数和能被5除尽的数
    @if $i % 2==0 or $i % 5==0 {
        //宽度
        .w-#{$i} {
            width: $i + px !important;
        }
        .h-#{$i}{
            height: $i + px !important;
        }
    }
}


// 定义内外边距，历遍1-300
@for $i from 0 through 300 {

    // 只要双数和能被5除尽的数
    @if $i % 2==0 or $i % 5==0 {
        
        //字体
        .font-#{$i}{
            font-size:$i + px !important;
        }
        // 字体间距
        .font-space-#{$i}{
            letter-spacing:$i + px !important;
        }
        //圆角
        .border-radius-#{$i} {
            border-radius: $i + px !important;
        }

        //图片固定宽高
        .image-width-#{$i} {
            width: $i + px !important;
            height: $i + px !important;
        }

        // 得出：u-margin-30或者u-m-30
        .margin-#{$i},
        .m-#{$i} {
            margin: $i + px !important;
        }

        // 得出：u-padding-30或者u-p-30
        .padding-#{$i},
        .p-#{$i} {
            padding: $i + px !important;
        }

        @each $short,
        $long in l left,
        t top,
        r right,
        b bottom {

            // 缩写版，结果如： u-m-l-30
            // 定义外边距
            .m-#{$short}-#{$i} {
                margin-#{$long}: $i + px !important;
            }

            // 定义内边距
            .p-#{$short}-#{$i} {
                padding-#{$long}: $i + px !important;
            }

            // 完整版，结果如：u-margin-left-30
            // 定义外边距
            .margin-#{$long}-#{$i} {
                margin-#{$long}: $i + px !important;
            }

            // 定义内边距
            .padding-#{$long}-#{$i} {
                padding-#{$long}: $i + px !important;
            }
        }

        .padding-lr-#{$i} {
            padding-left: $i + px !important;
            padding-right: $i + px !important;
        }
    }
}